import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import styles from './EditableLinkGroup.css';
import {Link} from 'react-router-dom';
import {Col} from 'antd';
/*eslint-disable */

const span = {
    xxl: {
        span: 12
    },
    xl: {
        span: 24
    },
    lg: {
        span: 8
    },
    md: {
        span: 8
    }
};

class EditableLinkGroup extends PureComponent {
    static defaultProps = {
        links: [],
        linkElement: 'a'
    };
    static propTypes = {
        links: PropTypes.array,
        onAdd: PropTypes.func,
        linkElement: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
    };

    render() {
        const {links, linkElement, onAdd} = this.props;
        return (
            <div className={styles.linkGroup}>
                {links.map((link, index) => (
                    <Col {...span} key={index}>
                        <Link className={styles.editableLink} key={`linkGroup-item-${link.id || link.title}`} to={link.href}>
                            {link.title}
                        </Link>
                    </Col>
                ))}
            </div>
        );
    }
}

export default EditableLinkGroup;
